<template>
  <view style="background-color: #fff;height: 100vh;">
    <!-- 轮播图 -->
    <view class="swpin"><u-swiper bg-color="#ffffff" height="810" mode="number" indicator-pos="bottomRight" :autoplay="true" :list="OBJ.images"></u-swiper></view>
    <view style="padding: 20rpx;padding-bottom: 100rpx;">
      <view class="describe">{{ OBJ.title }}</view>
      <view class="price">￥{{ OBJ.price }}</view>
      <view class="detailed">商品详情</view>
      <!-- <image style="width: 100%;display: flex;" src="/static/lzl/detil@2x.png" v-for="(item, index) in 1" mode="widthFix"></image> -->
      <view style="width: 100%;"><u-parse :html="OBJ.content"></u-parse></view>
      <view style="font-size: 32rpx; font-weight: 600;color: #000;margin:20rpx 0;">相关产品</view>
      <view class="gengduo" scroll-x="true">
        <scroll-view class="scrollContainer" scroll-x>
          <view class="scrollitem" v-for="(item, index) in related_products" :key="index" @click="getItem(item)">
            <image class="scrollimage" :src="item.image"></image>
            <!-- <view class="recommandItemText">85415646516552</view> -->
            <view class="tit">{{ item.title }}</view>
            <view class="price">￥{{ item.price }}</view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!--点击购买 -->
    <view class="btn"><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
    <!-- 点击加入购物车------------------------------------------------------------------------------------------------------------------------------------------------- -->
    <u-popup v-model="show" mode="bottom" :mask-close-able="true" border-radius="20">
      <view style="padding: 20rpx; padding-top: 60rpx;">
        <image style="position: absolute;width: 48rpx;height: 48rpx;top: 20rpx;right: 20rpx;" @click="close" src="/static/lzl/jiantou (2).png" mode="widthFix"></image>
        <!-- 上面的衣服图片 -->
        <view style="margin-bottom: 48rpx; display: flex;align-items:center;">
          <image style="width: 160rpx;height: 160rpx;" :src="skuOBJ.image || OBJ.image" mode="widthFix"></image>
          <view style="font-size: 28rpx;font-weight: 600;margin-left: 30rpx;">
            <view>{{ OBJ.title }}</view>
            <view>￥{{ skuOBJ.price || OBJ.price }}</view>
          </view>
        </view>
        <!-- 地址选择 -->
        <!-- <view style="margin-bottom: 48rpx;display: flex;align-items:center;justify-content: space-between;">
          <view>
            <view class="address">安徽省合肥市政务区广电中心</view>
            <view class="contacts">张某某 18565656565</view>
          </view>
          <view style="text-align: right;"><image style="width: 48rpx;height: 48rpx;" src="/static/lzl/jiantou (1).png" mode="widthFix"></image></view>
        </view> -->
        <view v-if="skuColor.length != 0" style="font-size: 32rpx;font-weight: 600;color: #001B0A ;margin-bottom: 30rpx;">颜色</view>
        <!-- 颜色选择 -->
        <view class="colour">
          <view class="colours" :class="{ active: index == colorActive }" @click="colorClick(index, item)" v-for="(item, index) in skuColor">
            <image class="left" src="/static/lzl/Frame 50@2x.png" mode="widthFix"></image>
            <view class="right">{{ item.name }}</view>
          </view>
        </view>
        <view v-if="skuSize.length != 0" style="font-size: 32rpx;font-weight: 500;font-weight: 600; color: #001B0A ;margin-bottom: 20rpx;">尺码</view>
        <!-- 选择尺码 -->
        <view class="size">
          <view class="sizeSon" :class="{ active: index == sizeActive }" @click="sizeClick(index, item)" v-for="(item, index) in skuSize" :key="index">{{ item.name }}</view>
        </view>
        <!-- 下方的步进器 -->
        <view class="stepper">
          <view class="tit">
            数量
            <text style="font-size: 24rpx;color: #aaa;">有货</text>
          </view>
          <view><u-number-box :input-width="100" bg-color="#dbdbdb" min="1" v-model="numJia" :input-height="60"></u-number-box></view>
        </view>
        <!-- 下方的加入购物车按钮 -->
        <button class="goShooping" @click="goshooping">加入购物车</button>
      </view>
    </u-popup>
    <!-- 这个是立即支付的功能 -->
    <u-popup v-model="payOBJ.show" mode="bottom" height="800rpx" :mask-close-able="true" border-radius="20">
      <view style="padding: 20rpx; padding-top: 50rpx;">
        <image style="position: absolute;width: 48rpx;height: 48rpx;top: 20rpx;right: 20rpx;" @click="palyClose" src="/static/lzl/jiantou (2).png" mode="widthFix"></image>
        <!-- 上面的衣服图片 -->
        <view style="margin-bottom: 24rpx; display: flex;align-items:center;">
          <image style="width: 160rpx;height: 160rpx;" :src="skuOBJ.image || OBJ.image" mode="widthFix"></image>
          <view style="font-size: 32rpx;font-weight: 600;margin-left: 30rpx;">
            <!-- <view>乐伊卡通针织衫 蓝色/灰色</view>
            <view>印花针织</view> -->
            <view style="font-size: 48rpx;color: #E23434 ;">￥{{ skuOBJ.price || OBJ.price }}</view>
          </view>
        </view>
        <!-- 地址选择 -->
        <!--   <view style="margin-bottom: 48rpx;display: flex;align-items:center;justify-content: space-between;">
          <view>
            <view class="address">安徽省合肥市政务区广电中心</view>
            <view class="contacts">张某某 18565656565</view>
          </view>
          <view style="text-align: right;"><image style="width: 48rpx;height: 48rpx;" src="/static/lzl/jiantou (1).png" mode="widthFix"></image></view>
        </view> -->
        <view v-if="skuColor.length != 0" style="font-size: 32rpx;font-weight: 600;color: #001B0A ;margin-bottom: 30rpx;">颜色</view>
        <!-- 颜色选择 -->
        <view class="colour">
          <view class="colours" :class="{ active: index == colorActive }" @click="colorClick(index, item)" v-for="(item, index) in skuColor">
            <image class="left" src="/static/lzl/Frame 50@2x.png" mode="widthFix"></image>
            <view class="right">{{ item.name }}</view>
          </view>
        </view>
        <view v-if="skuSize.length != 0" style="font-size: 32rpx;font-weight: 500;font-weight: 600; color: #001B0A ;margin-bottom: 20rpx;">尺码</view>
        <!-- 选择尺码 -->
        <view class="size">
          <view class="sizeSon" :class="{ active: index == sizeActive }" @click="sizeClick(index, item)" v-for="(item, index) in skuSize" :key="index">{{ item.name }}</view>
        </view>
        <!-- 下方的步进器 -->
        <view class="stepper">
          <view class="tit">
            数量
            <text style="font-size: 24rpx;color: #aaa;">有货</text>
          </view>
          <view><u-number-box :input-width="100" bg-color="#dbdbdb" min="1" v-model="payOBJ.numJia" :input-height="60"></u-number-box></view>
        </view>
        <!-- 下方的支付方式 -->
        <!--      <view class="payOrder">
          <view class="left">
            <image style="width: 64rpx;height: 64rpx;vertical-align: middle;margin-right: 10rpx;" src="/static/lzl/yue@2x.png" mode="widthFix"></image>
            余额支付
          </view>
          <view>
            <radio-group style="margin-top: 10rpx;" @change="checkChang"><radio @change="checkChang" :checked="payOBJ.current" /></radio-group>
          </view>
        </view>
        <view class="payOrder">
          <view class="left">
            <image style="width: 64rpx;height: 64rpx;vertical-align: middle;margin-right: 10rpx;" src="/static/lzl/weixin@2x.png" mode="widthFix"></image>
            微信支付
          </view>
          <view>
            <radio-group style="margin-top: 10rpx;" @change="checkChang"><radio @change="checkChang" :checked="!payOBJ.current" /></radio-group>
          </view>
        </view> -->
        <!-- 下方的加入购物车按钮 -->
        <button class="goShooping" @click="lijiPay">立即支付￥{{ skuOBJ.price ? skuOBJ.price * payOBJ.numJia : OBJ.price * payOBJ.numJia }}</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      OBJ: {},
      payOBJ: {
        current: true,
        show: false,
        numJia: 1
      },
      numJia: 1, //加入购物车的步进器数量
      sizeActive: 0, //这个是选择尺寸的active
      colorActive: 0, //这个是选择颜色的active
      // 加入购物车的显示
      show: false,
      skuColor: [], //规格颜色
      skuSize: [], //规格尺码
      sku_price: [], //规格价格
      options: [
        {
          icon: 'shop',
          text: '商城',
          infoBackgroundColor: '#007aff',
          infoColor: 'red'
        },
        {
          icon: 'cart',
          text: '购物车'
        }
      ],
      // 组件按钮参数
      skuL: '', //型号
      skuC: '', //颜色
      skuOBJ: {},
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#001b0a',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#001b0a',
          color: '#fff'
        }
      ],
      list: [
        {
          image: '/static/lzl/tou4@2x.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: '/static/lzl/tou4@2x.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: '/static/lzl/tou4@2x.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: '/static/lzl/tou4@2x.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        }
      ],
      related_products: [], //更多商品数组
      goods_list: {}
    };
  },
  watch: {
    skuL(newValue) {
      let n = null;
      if (this.skuC) {
        n = [newValue, this.skuC].join(',');
      } else {
        n = newValue;
      }
      let msku = this.sku_price.filter(item => {
        if (item.goods_sku_text == n) {
          return item;
        }
      });
      this.skuOBJ = msku[0];
    },
    skuC(newValue) {
      let n = null;
      if (this.skuL) {
        n = [this.skuL, newValue].join(',');
      } else {
        n = newValue;
      }
      let msku = this.sku_price.filter(item => {
        if (item.goods_sku_text == n) {
          return item;
        }
      });
      this.skuOBJ = msku[0];
    }
  },
  onLoad(option) {
    console.log(option);
    this.init(option.id);
  },
  methods: {
    // 点击购物车选择尺寸
    sizeClick(index, item) {
      this.sizeActive = index;
      this.skuL = item.name;
    },
    // 点击加入购物车选择颜色
    colorClick(index, item) {
      this.colorActive = index;
      this.skuC = item.name;
    },
    // 点击下方的推荐商品直接跳转
    getItem(item) {
      this.init(item.id);
    },
    // 点击购物车商城和购物车
    onClick(e) {
      console.log(e);
      if (e.index == 1) {
        uni.redirectTo({
          url: '/pages/Shopping/shoppingCart/shoppingCart'
        });
      } else {
        uni.redirectTo({
          url: '/pages/Shopping/Shopping'
        });
      }
    },
    // 点击立即支付
    lijiPay() {
      if (this.OBJ.sku.length != 0) {
        this.goods_list = {
          goods_id: this.skuOBJ.goods_id,
          goods_num: this.payOBJ.numJia,
          goods_price: this.skuOBJ.price,
          sku_price_id: this.skuOBJ.id
        };
      } else {
        this.goods_list = {
          goods_id: this.OBJ.id,
          goods_num: this.payOBJ.numJia,
          goods_price: this.OBJ.price,
          sku_price_id: this.OBJ.sku_price[0].id
        };
      }
      let obj = { goods_list: [this.goods_list], from: 'goods', buy_type: 'alone', groupon_id: 0 };
      uni.navigateTo({
        url: '/pages/Shopping/ConfirmOrder/ConfirmOrder?obj=' + JSON.stringify(obj)
      });
    },
    // 点击加入购物车模块
    async goshooping() {
      if (this.OBJ.sku.length != 0) {
        let n = await this.$api.add({
          from: 'goods',
          goods_list: [
            {
              goods_id: this.skuOBJ.goods_id,
              goods_num: this.numJia,
              goods_price: this.skuOBJ.price,
              sku_price_id: this.skuOBJ.id
            }
          ]
        });
        this.$msg(n.msg);
        this.show = false;
      } else {
        let n = await this.$api.add({
          from: 'goods',
          goods_list: [
            {
              goods_id: this.OBJ.id,
              goods_num: this.numJia,
              goods_price: this.OBJ.price,
              // this.OBJ.id ||s
              sku_price_id: this.OBJ.sku_price[0].id
            }
          ]
        });
        this.$msg(n.msg);
        this.show = false;
      }
    },
    // 点击购物车立即购买和加入购物车模块
    buttonClick(e) {
      console.log(e);
      if (e.index == 0) {
        this.show = true;
      } else if (e.index == 1) {
        this.payOBJ.show = true;
      }
      // this.options[2].info++;
    },
    // 点击购物车的关闭按钮
    close() {
      this.show = false;
    },
    palyClose() {
      this.payOBJ.show = false;
    },
    async init(id) {
      let n = await this.$api.detail({ id: id });
      this.OBJ = n.data;
      this.sku_price = n.data.sku_price || [];
      this.related_products = n.data.related_products || [];
      if (n.data.sku.length != 0) {
        this.skuOBJ = n.data.sku_price[0] || {};
        this.skuSize = n.data.sku[0].content || [];
        this.skuColor = n.data.sku[1].content || [];
        this.skuC = n.data.sku[1].content[0].name || '';
        this.skuL = n.data.sku[0].content[0].name || '';
      }
    },
    // 切换状态
    checkChang() {
      this.payOBJ.current = !this.payOBJ.current;
    }
  }
};
</script>

<style lang="scss" scoped>
.payOrder {
  display: flex;
  margin-top: 20rpx;
  justify-content: space-between;
}
.goShooping {
  width: 686rpx;
  height: 96rpx;
  line-height: 96rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  border-radius: 30rpx;
  background-color: #e23333;
  margin: 50rpx 0;
}
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30rpx;
  .tit {
    font-size: 32rpx;
    font-weight: 600;
  }
}
.size {
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
  box-sizing: border-box;
  .sizeSon {
    padding: 10rpx 15rpx;
    margin-right: 50rpx;
    background-color: #efefef;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #000;
    box-sizing: border-box;
    &.active {
      background-color: #fff;
      border: 2rpx solid #000;
    }
  }
}
.colour {
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
  box-sizing: border-box;
  .colours {
    display: flex;
    align-items: center;
    // width: 264rpx;
    padding: 0 10rpx 0 0;
    height: 72rpx;
    margin-right: 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #000;
    border-radius: 20rpx;
    box-sizing: border-box;
    background-color: #efefef;
    &.active {
      background-color: #fff;
      border: 2rpx solid #000;
    }
    .left {
      width: 72rpx;
      height: 72rpx;
      margin-right: 15rpx;
    }
    .right {
      font-size: 28rpx;
      color: #000;
    }
  }
}

.address {
  font-size: 32rpx;
  color: #000;
  font-weight: 600;
  display: -webkit-box; //对象作为弹性伸缩盒子模型显示
  overflow: hidden; //溢出隐藏
  -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
  -webkit-line-clamp: 1; //设置 块元素包含的文本行数
}
.contacts {
  font-size: 24rpx;
  color: #aaa;
  display: -webkit-box; //对象作为弹性伸缩盒子模型显示
  overflow: hidden; //溢出隐藏
  -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
  -webkit-line-clamp: 1; //设置 块元素包含的文本行数
}

// 容器
.scrollContainer {
  width: 100%;
  height: 482rpx;
  white-space: nowrap;
  // background-color: #fff;
}

// 容器项
.scrollitem {
  display: inline-block;
  margin-right: 30rpx;
  height: 234rpx;
  .tit {
    width: 332rpx;
    white-space: nowrap;
    /*2. 超出的部分隐藏*/
    overflow: hidden;
    /*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
  }
}

.scrollimage {
  width: 332rpx;
  height: 314rpx;
}

.recommandItemText {
  width: 270rpx;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.EmptyData {
  text-align: center;
  margin-top: 30rpx;
}
.describe {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
  display: -webkit-box; //对象作为弹性伸缩盒子模型显示
  overflow: hidden; //溢出隐藏
  -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
  -webkit-line-clamp: 2; //设置 块元素包含的文本行数
}
.price {
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}
.detailed {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
}
.btn {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.gengduo {
  height: 450rpx;
  // background-color: pink;
  width: 100%;
  .son {
    margin-right: 20rpx;
    width: 345rpx;
    height: 450rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .img {
      width: 345rpx;
      height: 314rpx;
    }
    .tit {
      margin-top: 10rpx;
      color: #001b0a;
      font-size: 32rpx;
      display: -webkit-box; //对象作为弹性伸缩盒子模型显示
      overflow: hidden; //溢出隐藏
      -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
      -webkit-line-clamp: 1; //设置 块元素包含的文本行数
    }

    .price {
      font-size: 32rpx;
      color: #001b0a;
      font-weight: 700;
      margin-top: 20rpx;
    }
  }
}
</style>
